<!DOCTYPE html>

<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS3 Animation Samples</title>
		<link rel=stylesheet type="text/css" href="css/index.css">  
	</head>
	<body height="400">
		<div id="main">
			<br/>
			webkitブラウザ(主にMobile Safari)で動作確認。
			幅320px×300pxの画面を想定。
			<ul id="list">
				<li><a href="acceleration.html">acceleration.html</a><br/>加速度：X軸方向へ加速しながら移動　イベントなし（PC推奨　0→1400まで移動するので）</li>
				<li><a href="border.html">border.html</a><br/>境界の扱い：ボールが境界にぶつかると跳ね返る<br/>ボールの中心座標を保持し、境界の衝突判定と衝突時の位置を壁にめりこまないよう修正</li>
				<li><a href="ease-out.html">ease-out.html</a><br/>速度と加速度：指定位置に向け移動、徐々に減速して停止(ease out)<br />touchstartで移動, touchmove中は追尾</li>
				<li><a href="easeOutCss.html">easeOutCss.html</a><br/>速度と加速度：上記をCSS3でease outにした場合<br /><strike>touchstartはうまくいくがtouchmoveがなめらかにならない</strike><br />touchmoveのみ対応、なめらかに（※タッチUIのみ）</li>
				<li><a href="easing.html">easing.html</a><br/>CSS3イージング：指定した種類のイージングで移動<br />赤い箱を左に引っ張ると黒い壁に衝突。（※タッチUIのみ）</li>
				<li><a href="friction.html">friction.html</a><br/>摩擦の扱い：簡易的な摩擦<br />境界の扱いに摩擦要素を追加したもの。静止するにはダンパーが必要</li>
				<li><a href="pendulum.html">pendulum.html</a><br/>角加速度：ふりこ動作　イベントなし</li>
				<li><a href="setintervalTest.html">setIntervalTest.html</a><br/>24fpsでボールが画面内を左右に移動　イベントなし</li>
				<li><a href="snow.html">snow.html</a><br/>複数のオブジェクトを動かす：動的にDOMを追加して動かす<br />雪がいっぱい降る　イベントなし</li>
				<li><a href="soccer.html">soccer.html</a><br/>イベント取得：touchStartイベントをとる<br />ボールを蹴りたい方向へフリックするとボールが移動（※タッチUIのみ）</li>
			</ul>
		</div> 
	</body>
</html>